<template>
  <div class="result-wrapper">
    <div class="song">
      <div class="name">
        <span class="iconfont icon-play"></span>
        美丽的神话
        <span class="iconfont icon-editmedia"></span>
      </div>
      <div class="singer">韩红|孙楠</div>
      <div class="album">《美丽的神话》</div>
      <div class="time">04:30</div>
    </div>
    <div class="song">
      <div class="name">
        <span class="iconfont icon-play"></span>
        美丽的神话
        <span class="iconfont icon-editmedia"></span>
      </div>
      <div class="singer">韩红|孙楠</div>
      <div class="album">《美丽的神话》</div>
      <div class="time">04:30</div>
    </div>
    <div class="song">
      <div class="name">
        <span class="iconfont icon-play"></span>
        美丽的神话
        <span class="iconfont icon-editmedia"></span>
      </div>
      <div class="singer">韩红|孙楠</div>
      <div class="album">《美丽的神话》</div>
      <div class="time">04:30</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    // 发出网络请求，请求歌曲列表信息
    console.log(this.$route.params.keyword);
    this.getMusicList(this.$route.params.keyword);
  },
  watch: {},
  beforeRouteUpdate(to, from, next) {
    console.log(to.params.keyword);
    this.getMusicList(to.params.keyword)
    next();
  },
  methods: {
    async getMusicList(keyword){
      // 发出axios 请求 渲染页面
      let res = await this.$axios.get("/search?keywords="+keyword)
      console.log(res.data.result.songs);
    }
  }
};
</script>

// 我们可以使用 src 直接导入外部的 css 文件，推荐这种方案，因为这种方案 scoped 会真实生效
<style scoped src="../assets/css/results.css"></style>